<script setup name="create-address">
import { watch, reactive } from 'vue';
import { showToast } from 'vant';
import api from '@/api';
const emit = defineEmits(['change', 'close']);
const props = defineProps({
    show: {
        type: Boolean,
        default: false
    },
    initData: {
        type: Object,
        default: () => ({})
    }
});
const state = reactive({
    showPopup: props.show,
    showRegion: false,
    addressInfo: '',
    btnDisabed: false
});

const addressState = reactive({
    name: '',
    phone: '',
    province: '',
    city: '',
    area: '',
    detail: ''
});

watch([() => props.show, () => props.initData], ([show, initData]) => {
    if (show) {
        state.showPopup = show;
    }
    Object.assign(addressState, initData);

    if (initData && initData.province) {
        state.addressInfo = `${initData.province}${initData.city}${initData.area}`;
    } else {
        state.addressInfo = '';
    }
});

watch(
    () => JSON.parse(JSON.stringify(addressState)),
    (addressState) => {
        let btnDisabed = false;
        for (let key in addressState) {
            if (!addressState[key]) {
                btnDisabed = true;
            }
        }
        state.btnDisabed = btnDisabed;
    },
    {
        deep: true,
        immediate: true
    }
);

const onClose = () => {
    emit('close');
    state.showPopup = false;
};

// 确定提交
const onConfirm = () => {
    if (state.btnDisabed) return;
    api.fetchPost('saveAddress', addressState, { hasErr: true }).then((res) => {
        const { code, message, data } = res;
        if (code === 0) {
            emit('change', {
                ...addressState,
                receiveAddressId: data
            });
            state.showPopup = false;
        } else {
            showToast(message);
        }
    });
};

const handleCloseRegion = () => {
    state.showRegion = false;
};

const handleConfirmRegion = (value) => {
    const [province, city, district] = value;
    addressState.province = province;
    addressState.city = city;
    addressState.area = district;
    state.addressInfo = `${province}/${city}/${district}`;
    handleCloseRegion();
};
</script>

<template>
    <van-popup
        class="popup-class"
        v-model:show="state.showPopup"
        round
        lock-scroll
        position="bottom"
        close-icon-position="top-left"
        :close-on-click-overlay="false"
    >
        <div class="popup-header">
            <div class="left" @click="onClose">
                <c-icon name="close" size="24" color="#1a1a1a"></c-icon>
            </div>
            <div class="title">收货信息</div>
            <div :class="`right ${state.btnDisabed ? 'btn-disabled' : ''}`" @click="onConfirm">
                确定
            </div>
        </div>
        <div class="popup-content">
            <van-field
                class="form-item"
                ref="nameRef"
                label="收件人"
                label-width="76px"
                v-model="addressState.name"
                :update:model-value="(addressState.name = addressState.name.replace(/[\r\n]/g, ''))"
                :style="{ borderRadius: '10px 10px 0 0' }"
                type="text"
                maxlength="30"
                placeholder="姓名"
            />
            <van-field
                class="form-item"
                label="手机号码"
                label-width="76px"
                v-model="addressState.phone"
                :update:model-value="
                    (addressState.phone = addressState.phone.replace(/[\r\n]/g, ''))
                "
                type="tel"
                maxlength="11"
                placeholder="收货人手机号码"
            />
            <van-field
                class="form-item"
                label-width="76px"
                v-model="state.addressInfo"
                readonly
                label="所在地区"
                placeholder="省/市/区"
                @click="state.showRegion = true"
            >
                <template #right-icon>
                    <c-icon name="arrow" color="#bbbbbb" size="20" />
                </template>
            </van-field>
            <van-field
                class="form-item field-textarea"
                label="详细地址"
                label-width="76px"
                v-model="addressState.detail"
                :update:model-value="
                    (addressState.detail = addressState.detail.replace(/[\r\n]/g, ''))
                "
                rows="2"
                type="textarea"
                maxlength="60"
                placeholder="街道门牌信息"
            />
        </div>
    </van-popup>
    <c-region
        :show="state.showRegion"
        @close="handleCloseRegion"
        @confirm="handleConfirmRegion"
    ></c-region>
</template>

<style lang="less" scoped>
@import '../../../../styles/variables.less';
@import '../../../../styles/mixin.less';

.popup-class {
    height: calc(100% - 188px);
    background-color: #f6f6f6;
    overflow: hidden;

    .popup-header {
        width: 100%;
        height: 56px;
        padding: 0 16px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .left,
        .right {
            width: 52px;
            height: 28px;
            line-height: 28px;
            display: flex;
            align-items: center;
        }

        .title {
            flex: 1;
            text-align: center;
            font-size: 17px;
            color: @label-color;
            font-weight: 500;
        }

        .right {
            box-sizing: border-box;
            background-color: @primary-color;
            color: @white;
            border-radius: 6px;
            font-size: 14px;
            font-weight: 500;
            justify-content: center;
        }

        .btn-disabled {
            color: @white;
            background-color: @disabled-color;
        }
    }

    .popup-content {
        margin: 0 16px;
        border-radius: 10px;

        .form-item {
            display: flex;
            align-items: center;
            font-size: 16px;
            height: 54px;
            line-height: 54px;
            padding: 0 16px;
            box-sizing: border-box;
            color: @label-color;

            &::after {
                right: 0;
            }
        }

        .field-textarea {
            box-sizing: border-box;
            padding: 17px 16px;
            display: flex;
            border-radius: 0 0 10px 10px;
            height: 78px;
            line-height: 22px;
            align-items: flex-start;

            :deep(.van-field__control--min-height) {
                min-height: 44px;
            }
        }
    }
}
</style>
